<template>
  <div class="comment">
    <h2>评论</h2>
    <div class="comment-input">
      <el-input type="textarea" :rows="2" placeholder="说点什么把.." v-model="commentStr" ></el-input>
      <el-button type="primary" class="comment-input-replay" size="mini" @click="submit">提交</el-button>
      <el-upload
        :action="'http://157.122.54.189:9095/upload'"
        name="files"
        ref="upload"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="success">
        <i class="el-icon-plus"></i>
      </el-upload>
    </div>

    <el-tag
        closable
        type="info"
        v-if="nickname"
        @close="colseTag"
    >
        @回复
        {{nickname}}
    </el-tag>
    <div v-for="(item) in commentData" :key="item.id">
      <el-card class="box-card" v-if="item" >
         <div class="comment-user-mes">
            <img src="http://157.122.54.189:9095/assets/images/avatar.jpg" alt="">
            <span>{{item.account.nickname}}</span>
            <span class="comment-date">{{item.created_at | filter}}</span>
            <span class="comment-level">{{item.level}}</span>
         </div>
          <el-card class="comment-item-inner" v-if="item.parent" >
            <detailsComenentInner :innerData="item.parent"  @innerNickName="innerNickName" />
          </el-card>
          <div  >
            <span >{{item.content}}</span>
            <el-row type="flex" class="comment-pics" v-if="item.pics">
            <el-col v-for="(img, index) in item.pics" :key="index" :span="5">
              <img  :src="`http://157.122.54.189:9095${img.url}`" alt="">
            </el-col>
          </el-row>
          </div>
          <span class="comment-btn" @click="replyTag(item.account.nickname, item.id)">回复</span>
      </el-card>
    </div>
    <el-card class="comment-zero" v-if="!commentData.length">
          <p>啥都没呢，不来抢个沙发吗？</p>
    </el-card>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 4, 8, 10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import moment from 'moment'
import detailsComenentInner from '../post/detailsCommentInner'
export default {
  name: '',
  components: {
    detailsComenentInner
  },
  data () {
    return {
      commentStr: '',
      commentData: [],
      pagesize: 2,
      currentPage: 1,
      total: 0,
      createDate: '',
      innerData: {
      },
      curId: '',
      nickname: '',
      followId: 0,
      pics: []
    }
  },
  filters: {
    // 过滤日期格式
    filter (value) {
      return moment(value).format('YYYY-MM-DD hh:mm')
    }
  },
  methods: {
    update () {
      //   const start = (this.currentPage - 1) * this.pagesize
      //   const end = (this.currentPage * this.pagesize)
      this.$http
        .get('/posts/comments', {
          params: {
            post: this.$route.query.id,
            _limit: this.pagesize,
            _start: (this.currentPage - 1) * this.pagesize
          }
        })
        .then(res => {
          this.total = res.data.total
          const { data } = res.data
          this.commentData = data
        })
    },
    handleSizeChange (size) {
      this.pagesize = size
      this.update()
    },
    handleCurrentChange (curPage) {
      this.currentPage = curPage
      this.update()
    },
    handlePictureCardPreview (file, fileList) {
      console.log(file)
    },
    handleRemove (file) {
      console.log(file)
    },
    success (response, file) {
      console.log(response[0])
      this.pics.push(response[0])
      console.log(this.pics)
    },
    replyTag (name, id) {
      this.nickname = name
      console.log(id)
      this.followId = id || ''
    },
    colseTag () {
      this.nickname = ''
    },
    innerNickName (namem, id) {
      console.log(name)
      this.nickname = name
      this.followId = id
    },
    submit () {
      this.$http.post('/comments', {
        content: this.commentStr,
        post: this.$route.query.id,
        follow: this.followId || null,
        pics: this.pics
      },
      {
        headers: {
          Authorization: `Bearer ${this.$store.state.user.userInfo.token}`
        }
      }
      ).then(res => {
        this.update()
        this.commentStr = ''
        console.log(res)
        setTimeout(() => {
          this.pics = []
          this.$refs.upload.clearFiles()
          this.followId = ''
          this.NickName = ''
        }, 200)
      })
    }
  },
  mounted () {
    this.update()
  },
  watch: {
    $route () {
      this.update()
    }
  }
}
</script>
<style lang="less" scoped>
.comment{
  .el-tag{
    margin: 10px 0;
  }
  .comment-input{
    position: relative;
    .comment-input-replay{
      position: absolute;
      right: 0;
      bottom: 50px;
    }
    /deep/.el-upload--picture-card{
      margin: 5px 0;
      width: 100px;
      height: 100px;
      line-height: 100px;
    }
  }
  .box-card{
    margin: 5px 0;
    padding: 5px;
    position: relative;
    .comment-user-mes{
      position: relative;
      span{
        font-size: 15px;
      }
      .comment-date{
        font-size: 13px;
        color: gray;
        margin-left: 3px;
      }
      .comment-level{
        position: absolute;
        right: 0;
        font-size: 15px;
        color: gray;
      }
      img{
        width: 20px;
        vertical-align: -5px;
      }
    }
    .comment-pics{
      width: 20%;
        .el-col{
          width: 100%;
          img{
            width: 100%;
          }
      }
    }
    .comment-btn{
      position: absolute;
      right: 20px;
      bottom: 05px;
      font-size: 13px;
      color: transparent;
      &:hover{
        display: block!important;
        color: rgb(61, 252, 252);
        cursor: pointer;
      }
    }
    .comment-item-inner{
      margin: 3px 0;
      }
    }
    .comment-zero{
      width: 100%;
      height: 150px;
      line-height: 100px;
      text-align: center;
      margin: 10px 0;
      background-color: rgb(245, 227, 195);
  }
}
</style>
